<template>
  <div class="good-link">
    <div class="left">
      <Box v-for="link in links" :key="link.href" :info="link"/>
    </div>
  </div>
</template>

<script>
import Box from "./components/box";
const links = [
  {
    href: " https://developer.mozilla.org/zh-CN/",
    title: "MDN",
    desc: "开放的 Web 为开发者提供了巨大的机遇，为了充分利用这些技术，你需要知道如何使用它们。在这里你可以找到相关 Web 技术的文档链接。",
  },
  {
    href: "https://www.17sucai.com/",
    title: "17素材网",
    desc: "",
  },
  {
    href: "https://www.iconfont.cn/",
    title: "阿里图标库",
  },
  {
    href: "https://www.npmjs.com/",
    title: "npm官网",
    desc: "",
  },
  {
    href: "#",
    title: "什么是SSR",
    desc: "",
  },
  {
    href: "https://vuex.vuejs.org/zh/index.html",
    title: "vuex官网",
    desc: "",
  },
];
export default {
  name: "GoodLink",
  components: {
    Box,
  },
  data() {
    return {
      links,
    };
  },
};
</script>

<style lang="less" scoped>
.good-link {
  display: flex;
  flex-direction: row;
  .left {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 20px;
    flex: 1;
  }
}
</style>